<template>
	<view class="container">
		<view class="header">
			<view class="userInfo" @click="editUser" v-if="userInfo">
				<view class="avatar">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="name">{{ userInfo.nickname }}</view>
			</view>
			<view class="userInfo" v-else>
				<view @click="$tools.to('/pages/login/login')" class="login-btn">立即登录</view></view>
		</view>
		<view class="tool-list">
			<view class="list">
				<view class="item" v-for="(item, index) in tools" :key="index" @click="goDetail(item.url)">
					<image :src="item.icon" mode=""></image>
					<view class="flex-1 ml-30">{{ item.title }}</view>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			show: false,
			tools: [
				{
					url: '../myOrder/myOrder',
					icon: require('../../static/tools-8.png'),
					title: '我的行程'
				},
				// {
				// 	url: '../address/address',
				// 	icon: require('../../static/tools-2.png'),
				// 	title: '地址管理'
				// },
				{
					url: '../distribution/distribution',
					icon: require('../../static/tools-9.png'),
					title: '客服中心'
				},
				{
					url: '../feedback/feedback',
					icon: require('../../static/tools-3.png'),
					title: '安全中心'
				},
				{
					url: '../setting/setting',
					icon: require('../../static/tools-10.png'),
					title: '设置'
				}
			],
			bannerList: [],
			user_id: '',
		};
	},
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo
		})
	},
	onShareAppMessage() {
		let userInfo = uni.getStorageSync('userInfo');
		return {
			path: '/pages/user/user?scene=' + userInfo.id
		};
	},

	onLoad(e) {
		if (e.scene) {
			this.user_id = e.scene;
			uni.setStorageSync('pid', this.user_id);
		}
		console.log('this.onLoad', this.userInfo)
	},
	methods: {
		...mapActions(['setUserInfo']),
		goBanner(e) {
			let url = this.bannerList[e].url;
			uni.navigateTo({
				url,
				fail: () => {
					uni.switchTab({
						url
					});
				}
			});
		},
		goDetail(url) {
			uni.navigateTo({
				url
			});
		},
		editUser() {
			uni.navigateTo({
				url: '../editUser/editUser'
			});
		},
		getBanner() {
			this.$api.banner().then((res) => {
				this.bannerList = res.data;
			});
		},
	}
};
</script>

<style lang="scss">
.container {
	/*background: url(https://youjin.phpcaff.cn/uploads/20220503/38638bc88a85e10507bdffbbacd1fff8.png) no-repeat;*/
	background-size: contain;
	background-color: #edf0f7;
	min-height: 100vh;
}
.header {
	padding-top: var(--status-bar-height);
}
.userInfo {
	padding: 60px 30upx 0;
	border-radius: 12upx 12upx 0px 0px;
	height: 160upx;
	display: flex;
	align-items: center;

	.avatar {
		width: 130upx;
		height: 130upx;
		border-radius: 100%;
		position: relative;

		.level {
			width: 32upx;
			height: 32upx;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.name {
		margin-left: 28upx;
		font-size: 36upx;
		font-weight: 500;
		color: #000000;
	}

	.login-btn {
		flex: 1;
		font-size: 32upx;
		font-weight: 500;
		color: #55b947;
		line-height: 176upx;
		text-align: center;
	}
}

.card-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20upx 8upx;
	border-radius: 0px 0px 12upx 12upx;

	.item {
		width: 172upx;
		padding-bottom: 38upx;
		border-radius: 12upx;
		text-align: center;

		.num {
			font-size: 42upx;
			font-weight: bold;
			color: #333333;
			line-height: 1;
			margin-top: 20upx;
		}

		.title {
			font-size: 24upx;
			font-weight: 500;
			color: #999999;
			line-height: 1;
			margin-top: 20upx;
		}
	}
}
.order {
	background: #ffffff;
	border-radius: 16upx;
	margin: 0 30upx 30upx;
	.title {
		font-size: 34upx;
		font-weight: bold;
		color: #333333;
		padding: 42upx 32upx 46upx;
	}
	.flex {
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
	}
	.list {
		@include menu-list(4);
		padding-bottom: 30upx;
		.item {
			position: relative;
			image {
				width: 52upx;
				height: 52upx;
			}
			view {
				font-size: 26upx;
				color: #666666;
				margin-top: 10upx;
			}
			.tags {
				position: absolute;
				right: 14upx;
				top: -16upx;
				border-radius: 20upx;
				background: #ff0000;
				color: #fff;
				min-width: 24upx;
				line-height: 30upx;
				padding: 0 6upx;
			}
		}
	}
}
.banner {
	margin: 20upx 0;
	image {
		width: 100%;
		height: 164upx;
	}
}
.tool-list {
	background: #fff;
	border-radius: 16upx;
	margin: 30upx;
	.title {
		font-size: 34upx;
		font-weight: bold;
		color: #333333;
		padding: 42upx 32upx 46upx;
	}
	.item {
		font-size: 30upx;
		font-weight: 400;
		color: #222222;
		@include flex-between;
		padding: 32upx;
		image {
			width: 36upx;
			height: 36upx;
		}
	}
}
</style>
